<template>
  <div>
    <!-- 搜索组件 -->
    <Homeheader />
    <!-- 粘性定位布局 sticky -->
    <!--  手势滑动swipeable -->
    <van-tabs
      v-model="active"
      background="#e4e4e4"
      animated
      duration="0.8"
      sticky
      swipeable
    >
      <van-tab v-for="item in categorys" :key="item.id" :title="item.name">
        <!-- 使用 list 组件将文章列表包裹起来
        每当 list 被拉到底, 就会触发一个事件 load  -->
        <!-- v-model 声明了这个列表是否正在加载中
        如果为 false 那么拉到底就会发出下一页的请求
        自动变为 true 然后等待,不会重复发送 -->
        <!-- finished 属性标注当前列表是否已经到底, 默认是 false
        如果是 true , 那么就显示借宿文字, 再也不会发送下一页请求了 -->

        <!-- 这个组件每当拉到底就会触发 load 事件, 可以监听他, 发送下一页请求 -->
        <van-list
          v-model="item.loading"
          :finished="item.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <!-- 内容组件 -->
          <PostItem v-for="item in item.postList" :key="item.id" :item="item" />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Homeheader from "@/components/Homeheader";
import PostItem from "@/components/PostItem";

export default {
  data() {
    return {
      active: 0,
      categorys: [],
      // postList: [],
    };
  },
  components: {
    Homeheader,
    PostItem,
  },
  mounted() {
    const arrUp = localStorage.getItem("arrUp");
    if (arrUp) {
      const res = {
        data: {
          data: JSON.parse(arrUp),
        },
      };
      const newData = res.data.data.map((item) => {
        return {
          ...item,
          postList: [],
          pageIndex: 1,
          pageSize: 5,
          loading: false,
          finished: false,
        };
      });
      this.categorys = newData;
      // console.log(this.categorys);s
      // 获取文章数据
      this.getPost();
    } else {
      // 请求栏目数据
      this.$axios({
        url: "/category",
      }).then((res) => {
        console.log(res);
        // 只有获取完栏目数据，才开始获取文章数据
        // 文章数组列表
        const newData = res.data.data.map((item) => {
          return {
            ...item,
            postList: [],
            pageIndex: 1,
            pageSize: 5,
            loading: false,
            finished: false,
          };
        });
        this.categorys = newData;
        // console.log(this.categorys);s
        // 获取文章数据
        this.getPost();
      });
    }
  },
  watch: {
    active() {
      // 之前每次当前激活码索引发生改变都会发送请求，
      // 现在因为每个栏目都要管理自己的文章，就可以判断当前栏目是不是有文章，
      // 来确认是否发送 请求
      const currentCategory = this.categorys[this.active];
      if (currentCategory.postList.length === 0) {
        this.getPost();
      }
    },
  },
  methods: {
    getPost() {
      // 获取栏目对应的id
      const id = this.categorys[this.active].id;
      // 获取当前栏目下对应的文章
      const currentCategory = this.categorys[this.active];
      // console.log(id);
      this.$axios({
        url: "/post",
        params: {
          category: id,
          pageIndex: currentCategory.pageIndex,
          pageSize: currentCategory.pageSize,
        },
      }).then((res) => {
        console.log(res);
        const { data } = res.data;
        //this.postList = data;
        // 获取文章后不应该放入公共的data中的poslist中了
        // 而是放入当前激活栏目 的 postList 中
        const currentCategory = this.categorys[this.active];
        //currentCategory.postList = data;
        // 将下一页的内容与上一页的 拼接起来
        currentCategory.postList = [...currentCategory.postList, ...data];
        console.log("当前文章", currentCategory);
        // 这里加载完了文章列表数据, 然后需要手动将当前栏目的加载状态改回 false 也就是没有正在加载
        // 这样子才能在下次拉到底的时候重新触发加载下一页
        // 加载状态结束
        currentCategory.loading = false;
        // 如果返回的数据数量比规定页面长度小，那么数据库已经见底
        if (data.length < currentCategory.pageSize) {
          currentCategory.finished = true;
        }
      });
    },

    onLoad() {
      console.log("onload事件加载下一页");
      const currentCategory = this.categorys[this.active];
      currentCategory.pageIndex += 1;
      // 请求文章数据
      this.getPost();
    },
  },
};
</script>

<style lang="less" scoped></style>
